﻿@{
    ViewBag.Title = "ImageUpload";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    #holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
    #holder.hover { border: 10px dashed #333; }
</style>

<h2>ImageUpload</h2>

@using (Html.BeginForm("ImageUpload", "Test", FormMethod.Post, new { id = "form1" }))
{
    <input type="hidden" id="aaa" name="aaa" value="" />
    <div id="holder" ></div>
    <p id="status">File API & FileReader API not supported</p>
    <input type="submit" value="테스트" />
}

<script type="text/javascript">
    var holder = document.getElementById('holder'),
        state = document.getElementById('status');

    if (typeof window.FileReader === 'undefined') {
        state.className = 'fail';
    } else {
        state.className = 'success';
        state.innerHTML = 'File API & FileReader available';
    }

    holder.ondragover = function () { this.className = 'hover'; return false; };
    holder.ondragend = function () { this.className = ''; return false; };
    holder.ondrop = function (e) {
        this.className = '';
        e.preventDefault();

        var file = e.dataTransfer.files[0],
            reader = new FileReader();
        
        reader.onload = function (event) {
            //holder.style.background = 'url(' + event.target.result + ') no-repeat center';
            document.getElementById("aaa").value = event.target.result;
        };
        
        //document.getElementById("aaa").value = file;

        //reader.readAsDataURL(file);
        console.log("1");
        reader.readAsArrayBuffer(file);

        return false;
    };
</script>


